<template>
  <!-- 投诉弹窗 -->
  <div class="cus-modal" v-if="popup"  @touchmove.stop.prevent="moveStop">
  	<div class="master-hit-box">
      <div class="master-hit-close">
        <img class="close-btn" src="./img/close.png" @click="close">
      </div>
  		<img class="master-hit-img" src="./img/bg.png">
      <div class="price-info">
        <div class="price-number"><span class="unit">￥</span>{{dPirce}}</div>
        <div class="price-tips1">订单金额 > {{dPirce}}元可使用</div>
        <div class="price-tips2">可在购买测算进行时抵扣</div>
      </div>
      <div class="info-time">
        <div class="tiem-text">将于</div>
        <uni-countdown class="custom-coutdown" :show-day="false" :font-size="28" :hour="1" :minute="0" :second="0" color="#FFFFFF" />
        <div class="tiem-text">后失效</div>
      </div>
      <div class="master-btn-box">
        <img class="master-btn" src="./img/btn.png" @click="userPreferential">
      </div>
  	</div>
  </div>
</template>

<script>
export default {
  name: 'preferential-modal',
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  watch: {
    info: {
      handler(newVal) {
        this.dPirce = (parseInt(newVal.price) - parseInt(newVal.activityPrice))/100
      }
    }
  },
  data() {
    return {
      dPirce: 0,
      popup: false,
    }
  },
  methods: {
		moveStop() {},
    open() {
      this.popup = true
    },
    close(e) {
      this.popup = false
    },
    userPreferential() {
      this.$emit("apply");
    }
  }}
</script>

<style lang="scss" scoped>
.cus-modal {
  	background-color: rgba(0,0,0,.6);
  	height: 100%;
  	width: 100%;
  	overflow: hidden;
  	position: fixed;
  	top: 0;
  	max-width: 960px;
  	z-index: 10000;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-end;
  	left: var(--window-left);
}
.master-hit-box {
  width: 90%;
  max-width: 414px;
  margin:auto;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.master-hit-img {
  width: 754rpx;
  height: 1022rpx;
}
.master-hit-close {
  align-self: flex-end;
}
.close-btn {
  width: 82rpx;
}
.price-info {
  position: absolute;
  top: 450rpx;
}
.price-number {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  color: #EC170E;
  font-size: 78rpx;
}
.unit {
  font-size: 36rpx;
}
.price-tips1 {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 32rpx;
  color: #262626;
  font-weight: bold;
}
.price-tips2 {
  margin-top: 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 24rpx;
  color: #262626;
}

.info-time {
  position: absolute;
  top: 724rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30rpx;
  color: #FFFFFF;
}
.tiem-text {
  padding: 0 8rpx;
}
.custom-coutdown {
  ::v-deep .uni-countdown__number {
    background: linear-gradient(-3deg, #FF927B, #FD312A);
    border: 1px solid;
    border-radius: 5rpx;
  }
  ::v-deep .uni-countdown__splitor span{
    color: #FFFFFF;
  }
}
.master-btn-box {
  width: 100%;
  position: absolute;
  bottom: 150rpx;
  text-align: center;
}
.master-btn {
  width: 322rpx;
  height: 112rpx;
}
</style>